<template>
	<view class="page">
		<view class="head">
			<view class="reportTitle">请选择举报原因</view>
			<view class="reportCauses">
				<view :class="[reportIndex == index ? 'reportCausesItemSelect' : 'reportCausesItem']" v-for="(item,index) in reportList" :key="index" @click="selectReportCauses(index)">{{ item }}</view>
			</view>
		</view>
		<view class="body">
			<view class="reportNoteTitle">备注说明（5-100字）</view>
			<view class="reportNoteContent">
				<textarea v-model="reportContent" value="" placeholder="请简明扼要的阐述您的理由，以便工作人员更好的判断" placeholder-class="reportNotePlaceholderText" maxlength="100" class="reportNoteText"/>
			</view>
			<view class="reportContact">
				<view class="reportContactTitle">联系方式</view>
				<view class="reportContactContacts">
					<view class="reportContactContactsTitle">联系人</view>
					<view class="reportContactContactsContent"><input v-model="reportContact" type="text" value="" placeholder="输入姓名" class="reportContactContactsInput" placeholder-class="reportContactContactsPlaceholderInput"/></view>
				</view>
				<view class="reportContactPhone">
					<view class="reportContactPhoneTitle">手机号</view>
					<view class=""><input v-model="reportPhone" type="text" value="" placeholder="输入手机号" class="reportContactPhoneInput" placeholder-class="reportContactPhonePlaceholderInput"/></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="reportButton" @click="reportSubmit()">举报</view>
		</view>
		<!-- 全局message组件 -->
		<QuickMessage ref="message"></QuickMessage>
	</view>
</template>

<script>
	import QuickMessage from '@/components/quick-message/quick-message.vue';
	export default {
		data() {
			return {
				infoId:0,
				classId:0,
				reportIndex:0,
				reportList:["电话虚假(空号、无人接听)","涉黄违法","虚假信息(如职位、待遇等)","恶意营销","其他"],
				reportContent: '',
				reportContact: '',
				reportPhone: '',
				reportParams:{},
			}
		},
		onLoad(option) {
			console.log(option)
			this.infoId = option.infoid
			this.classId = option.classid
			this.selectReportCauses(this.reportIndex)
			// 拼接固定参数
			this.reportParams['id'] = this.classId
			this.reportParams['fbid'] = this.infoId
		},
		methods: {
			selectReportCauses(index) {
				let reportCauseText = this.reportList[index]
				this.reportIndex = index
				this.reportParams['yuanyin'] = reportCauseText // 拼接参数
				console.log(this.reportParams)
			},
			showMessage(type, title, direction) {
				//显示message
				this.$refs.message.show({
					type: type, //默认default
					msg: title, //显示内容
					icon: true, //显示icon
					mask: false, //遮罩
					time: 3000, //显示时间
					direction: direction //方向
				});
				let id = this.$refs.message.id; //获取弹窗id,需要在弹出后获取
				setTimeout(() => {
					this.$refs.message.close(id); //关闭某个弹窗
				}, 3000);
				// if(this.messageData.time===false){
				// 	if(this.messageData.mask){
				// 		this.$refs.message.show({
				// 			type:'warning',
				// 			msg:'注意!! 当前遮罩已开启,不可点击,为了方便测试这里设置了10秒后关闭当前消息,你也可以关闭指定某个消息,详情查看说明文档及demo.',
				// 			time:10000
				// 		})
				// 		setTimeout(()=>{
				// 			this.$refs.message.close(id); //关闭某个弹窗
				// 		},10000)
				// 	}
				// }
			},
			reportSubmit(){
				// this.showMessage('warning', '请选择已经阅读发布条款！', 'center')
				
				if(!this.reportContent) {
					this.showMessage('warning', '请填写备注说明！', 'center')
					return
				} else if(this.reportContent.length < 5) {
					this.showMessage('warning', '填写备注至少5字！', 'center')
					return
				} else {
					// 拼接参数
					this.reportParams['beizhu'] = this.reportContent
				}
				
				if(!this.reportContact) {
					this.showMessage('warning', '请填写联系人！', 'center')
					return
				} else {
					// 拼接参数
					this.reportParams['person'] = this.reportContact
				}
				
				if(!this.reportPhone) {
					this.showMessage('warning', '请填写手机号！', 'center')
					return
				} else if(this.reportPhone.length != 11) {
					this.showMessage('warning', '请正确填写手机号！', 'center')
					return
				} else {
					// 拼接参数
					this.reportParams['phone'] = this.reportPhone
				}
				console.log(this.reportParams)
				
				this.$api.postInfoReport(this.reportParams).then(res => {
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 3000,
						complete: function () {
							setTimeout(function(){
								wx.reLaunch({
								    url: '/pages/index/index'
								});
							},3100)
						    
						}
					});
				})
				
			}
		},
		components: {
			QuickMessage
		}
	}
</script>

<style scoped>
@import url('infoReport.css');
</style>